

<!-- 评价晒单-订单商品列表 -->
<template name="goodListAfterSale">
	<view class="all">
		<view @click="gotoDetail(item.goodsBaseInfo.goodsCd)" class="shopGoodsList" v-for="(item, index2) of list" :key="index2">
			<view class="goodsBaseInfo">
				<image class="good-url" :src="imgSite + item.goodsBaseInfo.coverPicture"></image>
		
				<view class="good-detail">
					<view class="name ellipsis2">
						<!-- TODO预售、秒杀 -->
						<text class="goods-list-tip-ys" v-if="item.is_yushou === '1'">预售</text>
						<text class="goods-list-tip-ms" v-if="item.is_miaosha === '1'">秒杀</text>
						<text>{{ item.goodsBaseInfo.goodsName }}</text>
					</view>
					<view>
						<text class="size">{{ item.goodsBaseInfo.attributes | getSpecStr }}</text>
					</view>
		
					<!-- 价格，积分，购买数量 -->
					<view class="number">
						<view class="price">
							<text>¥{{ item.price / 100 }}</text>
<!--							<text v-if="item.points">+{{ item.points }}积分</text>-->
						</view>
		
						<!-- TODO操作数量 -->
						<view class="num">
							x{{item.count}}
						</view>
					</view>
				</view>
			</view>
			
			<view class="after-sale">
				<!-- <image v-if="item.evaluateFlag == 0"  class="evaluate" :src="icon.evaluate" mode=""></image> -->
				<view v-if="item.evaluateFlag == 0" class="column-div before" @click.stop="toEvaluate(item.orderDetailId)">评价</view>
				<view v-if="item.evaluateFlag == 1" class="applying">已评价</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	
	export default {
		filters: {
			
			//已选规格Str 
			getSpecStr(json) {
				
				try{
					var str = "";
					json = JSON.parse(json.goodsCategoryAttr);
					for(var i = 0; i < json.length; i++) {
						str += (json[i]["value"] + ' ');
					}
					return str;
				}catch(e){
					return "";
				}
			}
		},
		props: {
			list: {
				type: null,
				default: ''
			},
		},
		data() {
			return {
				icon: {
					evaluate: "/static/images/evaluate/evaluate.png"
				},
				hover: ''
			}
		},
		computed: {
			...mapState(['imgSite'])
		},
		methods: {
			// 跳转详情
			gotoDetail: function(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?id='+id
				});
			},
			
			// 详情页
			toEvaluate: function(orderDetailId) {
				uni.navigateTo({
					url: '/pagesGoods/evaluate/addEvaluate?orderDetailId='+orderDetailId
				});
			}
		}
	}
</script>

<style lang="scss">
	
	// 商品列表
	.shopGoodsList {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		padding: 28rpx 0;
		
		.goodsBaseInfo {
			display: flex;
			align-items: center;
			margin: 0 auto;
			width: 690rpx;
			height: 160rpx;
		}
	
		.check {
			position: relative;
			bottom: 60rpx;
		}
	
		.good-url {
			height: 160rpx;
			width: 160rpx;
		}
	
		.good-detail {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 490rpx;
			height: 100%;
			margin-left: 40rpx;
	
			.name {
				// height:60rpx;
				font-size:26rpx;
				font-family:PingFang SC;
				color:rgba(51,51,51,1);
				line-height:34rpx;
			}
	
			.size {
				height:36rpx;
				line-height: 36rpx;
				background:#FFFFFF;
				border-radius:5rpx;
				font-size:22rpx;
				font-family:PingFang SC;
				color:rgba(102,102,102,1);
				line-height:40rpx;
			}
	
			.number {
				display: flex;
				height: 40rpx;
				align-items: center;
	
				.price {
					width: 50%;
					font-size: 24rpx;
					color: #333333;
				}
	
				.num {
					width: 50%;
					font-size: 24rpx;
					display: flex;
					flex-direction: row-reverse;
					align-items: center;
					height: 100%;
					color: #333333;
				}
			}
		}
	}
	
	// 保税商品
	.bs-Container {
		margin: 0 auto;
		margin-top: 4rpx;
		width: 690rpx;
		
		.bs_goods {
			margin-left: 62rpx;
			font-size: 20rpx;
			color: white;
			background: #FE5E49;
			width: 100rpx;
			height: 30rpx;
			text-align: center;
			border-radius: 15rpx;
		}
	}
	
	// 赠品信息
	.gift {
		display: flex;
		width: 100%;
		margin-top: 30rpx;
		padding-left: 300rpx;
	
		.left {
			font-size:20rpx;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(51,51,51,1);
			line-height:30rpx;
		}
	
		.right-width {
			width: 370rpx;
		}
	
		.right {
			margin-left: 14rpx;
			font-size: 20rpx;
			color: #666;
			width: 360rpx;
			display: flex;
	
			.g-name {
				width: 300rpx;
				overflow: hidden;
			}
	
			.g-num {
				width: 60rpx;
				text-align: right;
			}
		}
	}
	
	
	// 评价
	.after-sale {
		position: relative;
		width: 100%;
		margin-top: 22rpx;
		font-size: 24rpx;
		display: flex;
		color: #999999;
		flex-direction: row-reverse;
		
		.evaluate {
			position: absolute;
			right: 0;
			width: 150rpx;
			height: 54rpx;
		}
	
		.before {
			border: 1px solid #FE5E49;
			border-radius: 54upx;
			font-size: 24rpx;
			color: #FE5E49;
			width: 150rpx;
			height: 54rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	
		.applying {
			color: #666666;
			width: 150rpx;
			height: 54rpx;
			background: #F5F5F5;
			border: 1rpx solid #eee;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 27rpx;
		}
	}
</style>




